<div class="{{this.baseClass}}__tag-input">
  {{#each @individualRecipients as |individualRecipient index|}}
    <NachoPillInput
      class="{{this.baseClass}}__pill"
      @value={{individualRecipient}}
      @onDelete={{fn @removeRecipient this.recipientType.individualRecipient index}}
    />
  {{/each}}
  <div class="{{this.baseClass}}__user-select">
    <NachoPillInput
    class="{{this.baseClass}}__pill"
    @placeholder="e.g.,jweiner"
    @onComplete={{fn @addRecipient this.recipientType.individualRecipient}}
    {{on "keyup" (fn this.onSearchLocal)}}
    />
    {{#if (and this.showOptions (gt this.options.length 0))}}
      <ul class="{{this.baseClass}}__suggestions-list">
        {{#each this.options as |option|}}
        <li>
          <button
            type="button"
            class="{{this.baseClass}}__suggestions-list-item"
            {{on "click" (fn this.onChangeSelection option)}}
          >
            <div class="{{this.baseClass}}__icon-container">
              <FaIcon
                class="{{this.baseClass}}__icon"
                @prefix="fas"
                @icon="user"
              />
            </div>
            <div class="{{this.baseClass}}__suggestions-list-item-detail">
              <div class="{{this.baseClass}}__suggestions-list-item-detail-name">
                <strong>
                  {{option.fullName}}
                </strong>
              </div>
              <div class="{{this.baseClass}}__suggestions-list-item-detail-email">
                {{option.email}}
              </div>
            </div>
          </button>
        </li>
        {{/each}}
      </ul>
    {{/if}}
  </div>
</div>
